<template>
	<view class="content">
		<!-- tabbar -->
		<view class="tabbar">
			<u-navbar :is-back="false" :is-fixed="false" :border-bottom="false">
				<view class="navbar-logo"><image src="../../static/logo.png" mode="aspectFit" class="image-logo"></image></view>
				<view class="navbar-user" slot="right" @click="toUser"><u-icon name="account" size="40" color="#d3daed"></u-icon></view>
			</u-navbar>
		</view>
		<!-- card -->
		<view class="info-card">
			<image src="/static/bg.png" mode="aspectFill" class="info-bg"></image>
			<view class="card-box card-box-2" @click="openMoneyList(2)">
				<view class="card-title">
					<text>USDT</text>
					<!-- <u-icon name="eye"></u-icon> -->
				</view>
				<view class="card-amount">
					<text>{{ userinfo.uMoney }}</text>
				</view>
			</view>
			
			<view class="card-box card-box-2" @click="openMoneyList(4)">
				<view class="card-title">
					<text>合约账户</text>
					<!-- <u-icon name="eye"></u-icon> -->
				</view>
				<view class="card-amount">
					<text>{{ userinfo.uLixi }}</text>
				</view>
			</view>

			<view class="card-box card-box-2" @click="openMoneyList(1)">
				<view class="card-title">
					<text>HTC</text>
					<!-- <u-icon name="eye"></u-icon> -->
				</view>
				<view class="card-amount">
					<text>{{ userinfo.uBenjin }}</text>
				</view>
			</view>

			<view class="card-box card-box-2" @click="openMoneyList(5)">
				<view class="card-title">
					<text>合约收益</text>
					<!-- <u-icon name="eye"></u-icon> -->
				</view>
				<view class="card-amount">
					<text>{{ userinfo.uTouZi }}</text>
				</view>
			</view>
			
			
	<!-- 		
			
			<view class="card-box card-box-3" @click="openMoneyList(5)">
				<view class="card-title">
					<text>赠送账户</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="card-amount">
					<text>{{ userinfo.uGrantMoney }}</text>
				</view>
			</view> -->
			
			
			
			<!-- 
			<view class="card-box card-box-3" @click="openMoneyList(5)">
				<view class="card-title">
					<text>DTSM交易</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="card-amount">
					<text>{{ userinfo.uDTSM }}</text>
				</view>
			</view> -->
			
			
		<!-- 	<view class="card-box card-box-3" @click="openMoneyList(5)">
				<view class="card-title">
					<text>DTSM锁仓</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="card-amount">
					<text>{{ userinfo.uSDTSM }}</text>
				</view>
			</view>
			 -->
			
			
			<!-- <view class="card-box card-box-3" @click="openMoneyList(3)">
				<view class="card-title">
					<text>DTSM冻结</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="card-amount">
					<text>{{ userinfo.uLixiSum }}</text>
				</view>
			</view> -->
			
			
		</view>
		
		
		
		
		
		<!-- grid -->
		<view class="swiper-grid">
			<swiper class="swiper" @change="change">
				<swiper-item>
					<u-grid :col="4" :border="false">
						<u-grid-item @click="openRecharge" >
						
								<image :src="`../../static/icon/g1.png`" mode="aspectFit" class="grid-icon"></image>
								<text class="grid-text">充币</text>
							
					
						</u-grid-item>
						
						
						<u-grid-item @click="openChange">
							
						
							<image :src="`../../static/icon/g2.png`" mode="aspectFit" class="grid-icon"></image>
							<text class="grid-text">划转(USDT)</text>
							
						</u-grid-item>
						
						
						<u-grid-item  @click="openWithdrawal">
								<image :src="`../../static/icon/g3.png`" mode="aspectFit" class="grid-icon"></image>
								<text class="grid-text">提币(USDT)</text>
						</u-grid-item>
						
						<u-grid-item  @click="showToast('暂未开放')">
								<image :src="`../../static/icon/main_futures.png`" mode="aspectFit" class="grid-icon"></image>
								<text class="grid-text">商城</text>
						</u-grid-item>
						
						
					
						
					</u-grid>
				</swiper-item>
				
			</swiper>
			<view class="indicator-dots">
				<view class="indicator-dots-item" v-for="(item, index) in 1" :key="index" :class="[current == index ? 'indicator-dots-active' : '']"></view>
			</view>
		</view>
		<!-- notice -->
		<view class="notice"><u-notice-bar type="info" mode="vertical" color="#cdd4e7" :list="noticeList" more-icon @click="showNotice"></u-notice-bar></view>
		<!-- 轮播图 -->
		<!-- <view class="banner"  v-if="tradinginfo.buyshow"><u-swiper @click="openDiShu"  :list="swiperList" height="130" mode="none"></u-swiper></view> -->
    <view class="grid-nav">
      <u-grid :col="4" :border="false">
        <u-grid-item bg-color="#101334" @click="showToast('暂未开放')">
          <u-icon name="/static/gc1.png" :size="100"></u-icon>
          <view class="grid-text">申购</view>
        </u-grid-item>
        <u-grid-item bg-color="#101334" @click="showToast('暂未开放')">
          <u-icon name="/static/gc2.png" :size="100"></u-icon>
          <view class="grid-text">矿池</view>
        </u-grid-item>
        <u-grid-item bg-color="#101334" @click="showToast('暂未开放')">
          <u-icon name="/static/gc3.png" :size="100"></u-icon>
          <view class="grid-text">签到奖励</view>
        </u-grid-item>
        <u-grid-item bg-color="#101334" @click="$u.route({url: 'pages/user/spread/spread'})">
          <u-icon name="/static/gc4.png" :size="100"></u-icon>
          <view class="grid-text">邀请好友</view>
        </u-grid-item>
      </u-grid>
    </view>
		<!-- <u-gap height="18" bg-color="#101334"></u-gap> -->
    <!-- 行情 -->
    <view class="quotation-box">
      <view class="quotation-tabs">
        <text class="text" :class="[quotationIndex == 0 ? 'active' : '']" @click="changeQuoIndex(0)">成交榜</text>
        <text class="text" :class="[quotationIndex == 1 ? 'active' : '']" @click="changeQuoIndex(1)">涨幅榜</text>
        <text class="text" :class="[quotationIndex == 2 ? 'active' : '']" @click="changeQuoIndex(2)">跌幅榜</text>
      </view>
      <view class="quotation-cont">
        <view class="main-coinbase u-padding-bottom-20">
          <view class="list-item" v-for="(item, index) in topSymbols" :key="index" 
            @click="toKline(item.symbol, item.id)">
            <coinbase-item
              :name="item.title"
              :value="topMakretMap[`market.${item.symbol}.detail`].tick ? topMakretMap[`market.${item.symbol}.detail`].tick.close : '0.00'"
              :range="topMakretMap[`market.${item.symbol}.detail`].change"
              :label="topMakretMap[`market.${item.symbol}.detail`].cny"
              :hot="index == 0 || index == 1"
              :nums="topMakretMap[`market.${item.symbol}.detail`].tick  ? topMakretMap[`market.${item.symbol}.detail`].tick.vol : '0.00'"
              ></coinbase-item>
          </view>
          <view class="u-padding-30" v-if="loadStatus == 'loading'">
            <u-loadmore :status="loadStatus" bg-color="none" />
          </view>
        </view>
      </view>
    </view>
		<!-- 快讯 -->
		<!-- <view class="news-content">
			<view class="newstitle"><text @click="openInfo(3)">快讯</text></view>
			<view class="news-list" v-if="newsList.length">
				<view v-for="(item, index) in newsList"  :key="index"  @click="openInfo(item.annId)">
					<news-item :title="item.annTitle" :time="item.annDate" :tag="item.annId == 1" ></news-item>
					
				</view>
				

			</view>
			<view v-else><u-empty text="没有数据哦~" mode="news"></u-empty></view>
		</view> -->
		<!-- 市场情绪 -->
		<!-- <view class="emotion-info">
      <view class="ex-box">
        <u-icon name="thumb-up" size="32" color="#4fb86e"></u-icon>
        <text class="mt">看多</text>
      </view>
      <view class="xpro-box">
        <view class="vxpro-flex">
          <text style="color: #4fb86e;">56%</text>
          <text>今日市场情绪</text>
          <text style="color: #eb6860;">47%</text>
        </view>
        <u-line-progress height="20" active-color="#4fb86e" inactive-color="#eb6860" :show-percent="false" :percent="56"></u-line-progress>
      </view>
      <view class="ex-box">
        <u-icon name="thumb-down" size="32" color="#eb6860"></u-icon>
        <text class="mt">看空</text>
      </view>
    </view> -->
		<!-- 公告 -->
		<u-modal v-model="show" :content="content" :title="noticeTitle"></u-modal>
	</view>
</template>

<script>
import { CUser } from '@/common/cache/user.js';
var cache_user = new CUser();

export default {
	data() {
		return {
      quotationIndex: 0,
			userinfo: {},
			tradinginfo:{},
			current: 0,
			show: false,
			noticeList: [],
			swiperList: [
				{
					image: '/static/banner.png'
				}
			],
			noticeTitle: '公告',
			content: '',
			newsList: [],
      topSymbols: [
        {symbol: 'btcusdt', title: 'BTC/USDT'},
        {symbol: 'ethusdt', title: 'ETH/USDT'},
        {symbol: 'eosusdt', title: 'EOS/USDT'}
      ],
      topMakretMap: {
        'market.btcusdt.detail': {},
        'market.ethusdt.detail': {},
        'market.eosusdt.detail': {},
      },
      loadStatus: 'nomore'
		};
	},

	onShow() {
		//个人数据
		cache_user.userinfo().then(res => {
			console.log('usershow', res);
			this.userinfo = res;
		});

		//交易数据
		cache_user.tradinginfo().then(res => {
      this.tradinginfo = res;
			if (res.message) {
				this.noticeList.push(res.message);
			}
		
		//	if (res.newlist) {
		//		this.newsList =res.newlist;
		//	}
		});
	},
  onLoad() {
    setTimeout(() =>{
    	this.getData()
    }, 500);
    setTimeout(() => {
      this.getListCoin().then((res) => {
        if (res.length) {
          res.map((item) => {
			  
			  console.log('item',item)
			  
			  
            let info = {
              title: item.coinA + '/' + item.coinB, // 币种标题
              change: ((item.coinAPrice - item.coinAOldPrice ) / item.coinAOldPrice  * 100).toFixed(2), // 浮动 比率
              cny: item.coinAPrice,// 人民币价值
              close: (item.coinAPrice / item.coinBPrice).toFixed(2), // 美元价值
              vol: item.deatil == null ? 0 : item.deatil.amount ,
              id: item.id
            }
            this.onaAddData(info)
            // 默认开始排序
            this.changeQuoIndex(0)
          })
        }
      })
    }, 100)
  },
  onUnload() {
    for(let i = 0; i < this.topSymbols.length; i++){
      let ch = `market.${this.topSymbols[i].symbol}.detail`
      let data = {
        "unsub": ch,
        "id": Date.now() + ""
      }
      this.$store.dispatch('WEBSOCKET_SEND', JSON.stringify(data))
      uni.$off(ch, (res) => {})
    }
  },
	methods: {
    showToast (value) {
      uni.showToast({
        title: value,
        icon: 'none'
      })
    },
    /**
     * 固定增加数据
     * @param {Object} data - 需要传递的数据格式， 格式如下
     * {
        title: 'TEST/USDT', // 币种标题
        change: '1.2', // 浮动 比率
        cny: '999.99' ,// 人民币价值
        close: '132.09' // 美元价值
        vol: // 成交量
      }
     * @param {Boolean} type - 是否增加，默认增加，false为修改数据
     */
    onaAddData (data, type = true) {
      let _d = {symbol: data.title, title: data.title, id: data.id}
      if (type) this.topSymbols.unshift(_d);
      this.topMakretMap[`market.${data.title}.detail`] = {
        ch: `market.${data.title}.detail`,
        change: data.change,
        cny: data.cny,
        tick: {
          close: data.close,
          vol: data.vol.toFixed(2)
        }
      }
    },
    getListCoin () {
      return new Promise((resolve) => {
        this.$api.http.get('assistance/tradinghall/getCoinList')
        .then(res => {
          resolve(res)
        });
      })
    },
    toKline (symbol, id) {
      this.$u.route({
        url: 'pages/public/kline',
        params: {
          symbol: symbol,
          id: id
        }
      })
    },
    getData () {
      let $this = this
      for(let i = 0; i < this.topSymbols.length; i++){
        let ch = `market.${this.topSymbols[i].symbol}.detail`
        let data = {
          "sub": ch,
          "id": Date.now() + ""
        }
        this.$store.dispatch('WEBSOCKET_SEND', JSON.stringify(data))
        uni.$on(ch, (res) => {
          let d = res.data
          d.tick.close = Number(d.tick.close).toFixed(2)
          d.tick.vol = (d.tick.vol / 1000).toFixed(2)
          d.change = parseFloat((d.tick.close - d.tick.open) / d.tick.open * 100).toFixed(2);
          d.cny = parseFloat(d.tick.close * this.$store.state.UsdtPrice).toFixed(2)
          $this.topMakretMap[res.data.ch] = d
        })
      }
    },
    changeQuoIndex (index) {
      // this.loadStatus = 'loading'
      this.quotationIndex = index
      if (index == 0) {
        this.volSort()
      } else if (index == 1) {
        this.upSort()
      } else if (index == 2) {
        this.downSort()
      }
      // setTimeout(() => {
      //   this.loadStatus = 'nomore'
      // }, 1500)
    },
    // 成交榜排序
    volSort () {
      this.topSymbols.sort((a, b) => {
        let aItem = this.topMakretMap[`market.${a.symbol}.detail`]
        let bItem = this.topMakretMap[`market.${b.symbol}.detail`]
		var vola = aItem == null ? 0 : aItem.tick == null ? 0 : aItem.tick.vol;
			var volb =  bItem == null ? 0 :  bItem.tick== null ? 0 : bItem.tick.vol;
		
        return volb - vola
      })
    },
    // 涨幅排序
    upSort () {
      this.topSymbols.sort((a, b) => {
        let aItem = this.topMakretMap[`market.${a.symbol}.detail`]
        let bItem = this.topMakretMap[`market.${b.symbol}.detail`]
        return bItem.change - aItem.change
      })
    },
    // 跌幅排序
    downSort () {
      this.topSymbols.sort((a, b) => {
        let aItem = this.topMakretMap[`market.${a.symbol}.detail`]
        let bItem = this.topMakretMap[`market.${b.symbol}.detail`]
        return aItem.change - bItem.change
      })
    },
		
		//打开新闻详情
		openMoneyList(type) {
		
			var that = this;
			uni.navigateTo({
				url: '../bussiness/moneylist?moneytype=' + type,
				fail: () => {},
				complete: () => {}
			});
		},
		
		
		//打开新闻详情
		openInfo(id) {
			console.log('id',id)
			var that = this;
			uni.navigateTo({
				url: '../bussiness/newsinfo?id=' + id,
				fail: () => {},
				complete: () => {}
			});
		},
		
		//打地鼠
		openDiShu(){
		
				console.log('dishu','dasishu')
			uni.navigateTo({
				url: '../bussiness/dishu',
				success: res => {},
				})
		},
		
	
		openChange(){
			uni.navigateTo({
				url: '../bussiness/changeaccounts',
				success: res => {},
				})
		},
		
		
		openWithdrawal(){
			uni.navigateTo({
				url: '../bussiness/withdrawal',
				success: res => {},
				})
		},
		
		
		
		openRecharge(){
			uni.navigateTo({
				url: '../bussiness/recharge',
				success: res => {},
				})
		},
		
		openTransfer(){
			uni.navigateTo({
				url: '../bussiness/transferaccounts',
				success: res => {},
				})
		},
		/**
		 * 公告
		 */
		showNotice(index) {
			//this.show = true;
			//this.content = this.noticeList[index];
			
			uni.navigateTo({
				url: '../bussiness/news?tabCur=2'
			});
			
		},
		toUser() {
			uni.navigateTo({
				url: '../user/bussinessuser'
			});
		},
		change(e) {
			this.current = e.detail.current;
		}
	}
};
</script>

<style lang="scss">
.navbar-logo {
	margin-left: 30rpx;
	.image-logo {
		width: 210rpx;
		height: 70rpx;
	}
}
.navbar-user {
	padding: 0 30rpx;
}
.swiper-grid {
	position: relative;
	padding-bottom: 16rpx;
	border-bottom: 1rpx solid $uni-text-color-grey;
}
.grid-icon {
	width: 50rpx;
	height: 50rpx;
}
.info-card {
	display: flex;
	// justify-content: space-between;
	flex-wrap: wrap;
	margin: 30rpx;
	margin-bottom: 0;
	border-radius: $uni-border-radius-lg;
	color: rgba($color: #fff, $alpha: 0.6);
	position: relative;
	overflow: hidden;
  // background: rgba($color: #fff, $alpha: 0.2);
	.info-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.card-box {
		padding-bottom: 24rpx;
		padding-top: 24rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 3;
    text-align: center;
	}
	.card-title {
		font-size: $uni-font-size-base;
		display: block;
		padding-bottom: 12rpx;
	}
	.card-amount {
		color: #fff;
		font-size: $uni-font-size-lg;
	}
	.card-box-2 {
		width: 50%;
	}
	.card-box-3 {
		width: 33.3%;
	
		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			width: 1rpx;
			height: 40rpx;
			margin-top: -20rpx;
			background: rgba($color: #fff, $alpha: 0.2);
		}
		
	}
}
.banner {
	padding: 12rpx 30rpx;
	border-bottom: 1rpx solid $uni-text-color-grey;
}
.news-content {
	padding: 0 20rpx;
}
.newstitle {
	color: #646464;
	padding: 20rpx 0;
	font-size: $uni-font-size-base;
}
.vxpro-flex {
	display: flex;
	justify-content: space-between;
}
.emotion-info {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	font-size: $uni-font-size-base;
}
.xpro-box {
	width: 580rpx;
}
.ex-box {
	width: 85rpx;
	text-align: center;
	font-size: $uni-font-size-base;
	color: #909090;
	display: flex;
	flex-direction: column;
	align-items: center;
	.mt {
		margin-top: 6rpx;
	}
}

.grid-text {
	font-size: $uni-font-size-sm;
	margin-top: 4rpx;
	color: $text-color;
}
.swiper {
	height: 160rpx;
}
.indicator-dots {
	display: flex;
	justify-content: center;
	align-items: center;
}
.indicator-dots-item {
	background-color: #ccc;
	height: 6rpx;
	width: 30rpx;
	margin: 0 2rpx;
}
.indicator-dots-active {
	background-color: $u-type-primary;
}
.grid-nav {
  .grid-text {
    font-size: 28rpx;
    color: #8289a5;
  }
}
.quotation-box {
  background-color: #16193a;
  .quotation-tabs {
    display: flex;
    justify-content: center;
    height: 122rpx;
    align-items: center;
    .text {
      flex: 1;
      font-size: 32rpx;
      color: #898c9b;
      text-align: center;
      &.active {
        color: #697ea9;
        font-weight: bold;
      }
    }
  }
}
</style>
